<template>
  <div class="detail">
    <HmHeaderr showArrow @clickLeft="goBack">
      <template>面经详情</template>
      <template #right></template>
    </HmHeaderr>
    <h1>{{ article.stem }}</h1>
    <div class="info">
      <span>{{ article.createdAt }}</span>
      <span>|</span>
      <span>{{ article.views }} 浏览量</span>
      <span>|</span>
      <span>{{ article.likeCount }} 点赞数</span>
    </div>

    <div class="qian">
      <img :src="article.avatar" alt="" />
      <span>{{ article.creator }}</span>
    </div>

    <div class="content">{{ article.content }}</div>
    <div class="footer">
      <span
        ><van-icon name="like-o" size="2rem" @click="like" :color="color"
      /></span>
      <span
        ><van-icon name="star-o" size="2rem" @click="collect" :color="color2"
      /></span>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "HmDetail",
  data() {
    return {
      optType: "",
      article: {},
      id: this.$route.query.id,
      color: "",
      color2: "",
    };
  },
  activated() {
    this.getDetail();
  },
  deactivated() {
    this.article = {};
  },
  created() {
    this.getDetail();
  },

  methods: {
    async collect() {
      this.optType = "2";
      if (this.article.collectFlag !== 1) {
        this.getordel();
        this.color2 = "#f15212";
        this.$toast.success("收藏成功");
        return;
      } else {
        this.getordel();
        this.color2 = "";
        this.$toast.success("取消收藏成功");
        return;
      }
    },

    async like() {
      this.optType = "1";
      if (this.article.likeFlag !== 1) {
        this.getordel();
        this.color = "#f15212";
        this.$toast.success("喜欢成功");
        return;
      } else {
        this.getordel();
        this.color = "";
        this.$toast.success("取消喜欢成功");
        return;
      }
    },
    async getordel() {
      await axios({
        method: "post",
        url: "http://interview-api-t.itheima.net/h5/interview/opt",
        headers: {
          Authorization: `Bearer ${localStorage.getItem("token")}`,
        },
        data: {
          id: this.id,
          optType: this.optType,
        },
      });
    },
    async getDetail() {
      const res = await axios({
        url: "http://interview-api-t.itheima.net/h5/interview/show",
        method: "get",
        params: {
          id: this.id,
        },
        headers: {
          Authorization: `Bearer ${localStorage.getItem("token")}`,
        },
      });
      this.article = res.data.data;

      console.log(this.article.likeFlag, "like");
      console.log(this.article.collectFlag, "collect");

      this.article.likeFlag === 1
        ? (this.color = "#f15212")
        : (this.color = "");

      this.article.collectFlag === 1
        ? (this.color2 = "#f15212")
        : (this.color2 = "");
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.qian {
  display: flex;
  align-items: center;

  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}

.content {
  text-indent: 2em;
}
.footer {
  display: flex;
  position: fixed;
  bottom: 80px;
  right: 20px;
  span {
    background-color: #fff;
    padding: 10px;
    border-radius: 50%;
  }
}
</style>
